<template>
  <div class="workflow-usage-example">
    <div class="example-header">
      <h3>RBO工作流设计器使用示例</h3>
      <p>展示如何在资源能力配置中集成工作流设计器</p>
    </div>

    <div class="example-content">
      <Card title="资源能力配置" class="config-card">
        <Form :model="capabilityConfig" layout="vertical">
          <FormItem label="能力名称">
            <Input
              v-model:value="capabilityConfig.name"
              placeholder="请输入能力名称"
            />
          </FormItem>

          <FormItem label="能力描述">
            <Textarea
              v-model:value="capabilityConfig.description"
              placeholder="请输入能力描述"
            />
          </FormItem>

          <FormItem label="实现类型">
            <Select
              v-model:value="capabilityConfig.implementationType"
              @change="onImplementationTypeChange"
            >
              <Select.Option value="api">API调用</Select.Option>
              <Select.Option value="workflow">工作流</Select.Option>
              <Select.Option value="rule">规则引擎</Select.Option>
              <Select.Option value="service">服务调用</Select.Option>
            </Select>
          </FormItem>

          <!-- 工作流配置 -->
          <FormItem
            v-if="capabilityConfig.implementationType === 'workflow'"
            label="工作流设计"
          >
            <div class="workflow-section">
              <div class="workflow-header">
                <span>工作流配置</span>
                <Button
                  type="primary"
                  size="small"
                  @click="openWorkflowDesigner"
                >
                  <IconifyIcon icon="ant-design:edit-outlined" />
                  设计工作流
                </Button>
              </div>

              <div
                v-if="capabilityConfig.workflowData"
                class="workflow-preview"
              >
                <div class="preview-header">
                  <span>工作流预览</span>
                  <Button type="text" size="small" @click="clearWorkflow">
                    <IconifyIcon icon="ant-design:delete-outlined" />
                    清除
                  </Button>
                </div>
                <div class="preview-content">
                  <div class="workflow-info">
                    <p>
                      <strong>节点数量:</strong> {{ workflowInfo.nodeCount }}
                    </p>
                    <p>
                      <strong>连接数量:</strong> {{ workflowInfo.edgeCount }}
                    </p>
                    <p>
                      <strong>最后更新:</strong> {{ workflowInfo.lastUpdate }}
                    </p>
                  </div>
                </div>
              </div>

              <div v-else class="workflow-empty">
                <IconifyIcon icon="ant-design:plus-outlined" />
                <p>点击"设计工作流"按钮开始创建工作流</p>
              </div>
            </div>
          </FormItem>

          <FormItem>
            <Button type="primary" @click="saveCapability">保存能力配置</Button>
            <Button style="margin-left: 8px" @click="resetForm">重置</Button>
          </FormItem>
        </Form>
      </Card>
    </div>

    <!-- 工作流设计器抽屉 -->
    <WorkflowDrawer>
      <div class="workflow-drawer-content">
        <RboWorkflowDesigner ref="workflowDesignerRef" />
      </div>
    </WorkflowDrawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import {
  Card,
  Form,
  FormItem,
  Input,
  Textarea,
  Select,
  Button,
  message,
} from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';
import { useVbenDrawer } from '@vben/common-ui';
import { RboWorkflowDesigner } from './index';

// 能力配置
const capabilityConfig = reactive({
  name: '',
  description: '',
  implementationType: 'api',
  workflowData: null as any,
});

// 工作流设计器相关
const workflowDesignerRef = ref();

// 抽屉相关
const [WorkflowDrawer, workflowDrawerApi] = useVbenDrawer({
  title: 'RBO工作流设计器',
  width: '90%',
  footer: false,
  closeOnClickModal: false,
  modal: false,
});

// 工作流信息
const workflowInfo = computed(() => {
  if (!capabilityConfig.workflowData) {
    return {
      nodeCount: 0,
      edgeCount: 0,
      lastUpdate: '-',
    };
  }

  return {
    nodeCount: capabilityConfig.workflowData.nodes?.length || 0,
    edgeCount: capabilityConfig.workflowData.edges?.length || 0,
    lastUpdate: new Date().toLocaleString(),
  };
});

// 实现类型变更
const onImplementationTypeChange = (value: string) => {
  if (value !== 'workflow') {
    capabilityConfig.workflowData = null;
  }
};

// 打开工作流设计器
const openWorkflowDesigner = () => {
  workflowDrawerApi.open();
};

// 清除工作流
const clearWorkflow = () => {
  capabilityConfig.workflowData = null;
  message.success('工作流已清除');
};

// 保存能力配置
const saveCapability = () => {
  if (!capabilityConfig.name.trim()) {
    message.error('请输入能力名称');
    return;
  }

  if (
    capabilityConfig.implementationType === 'workflow' &&
    !capabilityConfig.workflowData
  ) {
    message.error('请设计工作流');
    return;
  }

  // 获取工作流数据
  if (workflowDesignerRef.value) {
    const workflowData = workflowDesignerRef.value.getData();
    if (workflowData) {
      capabilityConfig.workflowData = workflowData;
    }
  }

  console.log('保存能力配置:', capabilityConfig);
  message.success('能力配置保存成功');
};

// 重置表单
const resetForm = () => {
  capabilityConfig.name = '';
  capabilityConfig.description = '';
  capabilityConfig.implementationType = 'api';
  capabilityConfig.workflowData = null;
  message.success('表单已重置');
};
</script>

<style lang="less" scoped>
.workflow-usage-example {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;

  .example-header {
    margin-bottom: 24px;
    text-align: center;

    h3 {
      margin-bottom: 8px;
      color: #1890ff;
    }

    p {
      color: #666;
      margin: 0;
    }
  }

  .example-content {
    max-width: 800px;
    margin: 0 auto;

    .config-card {
      .workflow-section {
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        padding: 16px;

        .workflow-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;

          span {
            font-weight: 500;
            color: #333;
          }
        }

        .workflow-preview {
          .preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            span {
              font-weight: 500;
              color: #333;
            }
          }

          .preview-content {
            background: #fafafa;
            border-radius: 4px;
            padding: 12px;

            .workflow-info {
              p {
                margin: 4px 0;
                color: #666;

                strong {
                  color: #333;
                }
              }
            }
          }
        }

        .workflow-empty {
          text-align: center;
          padding: 40px 20px;
          color: #999;

          .anticon {
            font-size: 48px;
            margin-bottom: 16px;
            display: block;
          }

          p {
            margin: 0;
          }
        }
      }
    }
  }

  .workflow-drawer-content {
    height: calc(100vh - 120px);
    overflow: hidden;
  }
}
</style>
